<template>
<!-- 添加流程名称 -->
  <div>
<!--    <el-page-header @back="goBack" title="设置" content="审批流设置" ></el-page-header>-->
    <template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="流程配置" name="liuchengpeizhi">

<!--    高查    -->
        <el-row justify="start">
          <el-col :span="7">
            <div style="margin-top: 15px;">
        <el-form :inline="true" v-model="flowNameFormData"  class="demo-form-inline">

              <el-form-item label="流程名称:">
              <el-input v-model="flowNameFormData.fname" placeholder="请输入流程名称" >
                <el-button slot="append" @click="flownameGet" icon="el-icon-search"></el-button>
              </el-input>

              </el-form-item>

        </el-form>
            </div>

        </el-col>

<!--  添加按钮  -->
          <el-col :span="3">
            <div style="margin-top: 15px;">
        <el-button  @click="addFlowNameBtn" >添加</el-button>
            </div>
          </el-col>
        </el-row>

        <el-table
            :data="flowNameData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="ID">
          </el-table-column>
          <el-table-column
              prop="fname"
              label="名称">
          </el-table-column>
          <el-table-column
              prop="createDate"
              label="创建时间">
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作">

            <template slot-scope="scope">

              <el-dropdown placement="bottom" trigger="click">
                <el-button type="text" size="small">操作</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item  @click.native="queryFlowName(scope.row)">查看</el-dropdown-item>
                  <el-dropdown-item  @click.native="delFlowNames(scope.row)">删除</el-dropdown-item>
                  <el-dropdown-item  @click.native="updateFlowNames(scope.row)">修改</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </template>



<!--            <template slot-scope="scope" >-->
<!--              <el-popconfirm-->
<!--                  confirm-button-text='删除'-->
<!--                  cancel-button-text='取消'-->
<!--                  icon="el-icon-info"-->
<!--                  icon-color="red"-->
<!--                  title="确定删除吗?"-->
<!--                  @confirm="delFlowNames(scope.row.id)"-->
<!--              >-->
<!--              <el-button  slot="reference"   type="text">删除</el-button>-->

<!--              </el-popconfirm>-->
<!--            </template>-->



          </el-table-column>

        </el-table>

        <!--  分页  -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2, 4, 6, 8]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total">
        </el-pagination>



      </el-tab-pane>

      <el-tab-pane label="审批项目" name="second">

<ApprovalProject></ApprovalProject>

      </el-tab-pane>


      <el-tab-pane label="审批角色设置" name="shenpijuese">

        <el-form :inline="true" :model="flowNodeForm" class="demo-form-inline">
          <el-form-item label="节点名称:">
            <el-input v-model="flowNodeForm.nodeName" placeholder="节点名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="flowNodeForm.roleId" placeholder="角色" clearable>
              <el-option
                  v-for="item in roleData"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id+'' ">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryFlowNode">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addFlowNode">添加</el-button>
          </el-form-item>
        </el-form>

        <el-table
            :data="flowNodeData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="ID">
          </el-table-column>
          <el-table-column
              prop="nodeName"
              label="节点名称">
          </el-table-column>
          <el-table-column
              prop="roleName"
              label="所属角色">
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作">

            <template slot-scope="scope">

              <el-dropdown placement="bottom" trigger="click">
                <el-button type="text" size="small">操作</el-button>
                <el-dropdown-menu slot="dropdown">
<!--                  <el-dropdown-item  @click.native="queryFlowName(scope.row)">查看</el-dropdown-item>-->
                  <el-dropdown-item  @click.native="delFlowNode(scope.row)">删除</el-dropdown-item>
                  <el-dropdown-item  @click.native="upFlowNode(scope.row)">修改</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </template>

          </el-table-column>

        </el-table>




      </el-tab-pane>
    </el-tabs>

      <div v-if="XiaoHiuZiZuJian">
      <!-- 添加对话框 -->
      <el-dialog
          title="添加流程线"
          :visible.sync="dialogVisible"
          width="50%">


<!--   dialogVisible=false 关闭对话框     -->
        <AddFlowName @addOK="addok"></AddFlowName>

      </el-dialog>
      </div>
    </template>

    <!-- 查看流程节点对话框 -->
    <el-dialog
        title="查看流程节点"
        :visible.sync="nodeNameDialog"
        width="50%">

      <span v-for="(value , index) in nodeData " :key="index">

        <span v-if="index === 0">
          {{ nodeData[index].nodeName }}
        </span>
        <span v-if="index > 0"> ====> {{ nodeData[index].nodeName }}</span>

      </span>
    </el-dialog>


<!--  修改对话框  -->
    <el-dialog
        title="修改流程节点"
        :visible.sync="updateDialog"
        width="50%">

<!--      <span>{{flowNameList[0].fname}}</span>-->



        <el-form :model="conforderform" ref="conforderform" label-width="100px" >

<!--          <el-row>-->
<!--            <el-col :span="15">-->
          <el-form-item label="流程名称:" >
            <el-input readonly v-model="flowNameList.fname"></el-input>
          </el-form-item>
<!--            </el-col>-->
<!--          </el-row>-->

          <el-form-item label="审批节点" >
            <!-- 渲染问题列表 -->
            <section v-for="(value, index) in conforderform.lastquestions" :key="index">
              <section v-if="index === 0">
                <el-row>
                  <el-col :span="15">
                    <!--                  <el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index)"/>-->
                    <el-select v-model="conforderform.lastquestions[index]" clearable placeholder="请选择"  style="width: 100%">
                      <el-option
                          v-for="node in flowNodeData"
                          :key="node.id"
                          :label="node.nodeName"
                          :value="node.id+''">
                      </el-option>
                    </el-select>

                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addlastitems(index, '1')"/>
                  </el-col>
                </el-row>
              </section>
              <section v-if="index > 0">
                <!-- 添加的子项目 -->
                <el-row style="margin-top:10px;">
                  <el-col :span="15">
                    <!--                  <el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')"/>-->



                    <el-select v-model="conforderform.lastquestions[index]" clearable placeholder="请选择" style="width: 100%">
                      <el-option
                          v-for="node in flowNodeData"
                          :key="node.id"
                          :label="node.nodeName"
                          :value="node.id+''">
                      </el-option>
                    </el-select>



                  </el-col>
                  <el-col :span="4">
                    <el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')"/>
                  </el-col>
                </el-row>
              </section>
            </section>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updateLineBtn">提交</el-button>
          </el-form-item>


      </el-form>

    </el-dialog>


    <div v-if="!showNode">

      <el-dialog
          title="节点编辑"
          :visible.sync="nodeDialog"
          width="50%"
          :before-close="handleClose">

        <el-form :inline="true" :model="addOrUpflowNodeForm" class="demo-form-inline">
          <el-form-item label="节点名称:">
            <el-input v-model="addOrUpflowNodeForm.nodeName" placeholder="节点名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="addOrUpflowNodeForm.roleId" placeholder="角色" clearable>
              <el-option
                  v-for="item in roleData"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>


        <span slot="footer" class="dialog-footer">
    <el-button @click="showNode = true">取 消</el-button>
    <el-button type="primary" @click="addOrUpNodeBtn">确 定</el-button>
  </span>
      </el-dialog>

    </div>


  </div>
</template>

<script>

//导入addFlowname.vue
import AddFlowName from "./AddFlowName";
//导入审批项目组件
import ApprovalProject from "./ApprovalProject";

export default {
  name: "FlowName",
  components:{AddFlowName,ApprovalProject},
  data(){
    return{
      addOrUpflowNodeForm:{},
      showNode:true,
      nodeDialog:true,
      roleData:[], // 角色数据
      flowNodeForm:{
        roleId:'',
      }, // 流程审批节点查询
      flowNode:[], // 流程审批节点数据
      flowNodeData:[], //
      updateDialog:false , // 修改对话框
      nodeNameDialog:false , // 控制查看节点对话框
      nodeData:[], // 审批节点
      pageData:{}, // 分页数据
      flowNameData:[],
      activeName:"liuchengpeizhi",// Tabs 标签页控制
      flowNameFormData:{ //高查 参数
        pageCur:"1",//页码
        pageSize:"2",//每页显示多少
        fname:""
      },
      dialogVisible:false, //添加对话框控制
      XiaoHiuZiZuJian:false, // 控制对话框 诞生 毁灭
      conforderform: {
        lastquestions: [''], // 上次所提议题 下标控制框框个数
      },
      flowNameList: {
        fname:"",
        fid:"",
      }, // 修改查询的全部数据
    }
  },
  created() {
this.flownameGet()
  },
  methods:{
    addOrUpNodeBtn(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if(this.addOrUpflowNodeForm.id == null || this.addOrUpflowNodeForm.id == ''){
        this.$http.post("flownodes" ,this.addOrUpflowNodeForm)
            .then( () => {
              setTimeout(() => {
                loading.close();
              });
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
              this.showNode = true
              this.queryFlowNode()
            } )
            .catch()
      }else {
        this.$http.put("flownodes" ,this.addOrUpflowNodeForm)
            .then(() => {
              setTimeout(() => {
                loading.close();
              });
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
              this.showNode = true
              this.queryFlowNode()
            })
            .catch()
      }


    },
    handleClose(){
      this.showNode = !this.showNode
    },
    querySysRole(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("flownodes" , {params:{chaxun:2}})
      .then( res => {
        setTimeout(() => {
          loading.close();
        });
        this.roleData = res.data.data
      })
      .catch()
    },
    delFlowNode(row){ // 删除流程审批节点
      // alert(row.id)
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$confirm('确认删除？')
          .then( ()  => {

            this.$http.delete(`flownodes/${row.id}`)
                .then(res => {
                  setTimeout(() => {
                    loading.close();
                  });
                  if (res.data.data == "ok") {
                    this.$message({
                      message: '删除成功!',
                      type: 'success'
                    });
                    this.queryFlowNode()
                  } else if (res.data.data == "error") {
                    this.$message.error('节点有进行的任务,无法删除!');
                  }

                })
                .catch()
          })
      .catch()
    },
    addFlowNode(){ // 添加
      this.addOrUpflowNodeForm = {}
      this.showNode = false

    },
    upFlowNode(row){ // 修改流程审批节点
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.addOrUpflowNodeForm = {}

      this.$http.get("flownodes" , {params:{id:row.id,chaxun:3}})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.addOrUpflowNodeForm = res.data.data
      })
      .catch()

      this.addOrUpflowNodeForm.id = row.id
      this.showNode = false
    },
    queryFlowNode(){ // 流程审批角色查询
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("flownodes" ,{params:this.flowNodeForm})
      .then( res => {
        setTimeout(() => {
          loading.close();
        });
        this.flowNodeData = res.data.data
      })
      .catch()
    },

    flownameGet(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

    this.$http.get("flownames",
        {params:this.flowNameFormData
        })
      .then(res =>{
        setTimeout(() => {
          loading.close();
        });
            this.pageData = res.data.data
            this.flowNameData=res.data.data.list
          }
      )
      .catch(

      )

    },
    handleClick() {
      if(this.activeName == "liuchengpeizhi"){
        this.flownameGet()
      }if(this.activeName == "shenpijuese"){
        this.querySysRole()
        this.queryFlowNode()
      }
    },
    addFlowNameBtn(){
      this.XiaoHiuZiZuJian = true //对话框诞生
      // 显示添加对话框
      this.dialogVisible=true;
    },
    delFlowNames(row){  //  删除 a : 点击这条数据的主键

      this.$confirm('确认删除？')
          .then( ()  => {
            const loading = this.$loading({
              lock: true,
              text: '正在载入...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });

            this.$http.delete("flownames",{params:{"fid":row.id}})
                .then( () => {
                  setTimeout(() => {
                    loading.close();
                  });
                  this.$message({
                    message: '删除成功!',
                    type: 'success'
                  });
                  // this.flowNameFormData.pageCur=1
                      this.flownameGet()  //删除成功后调用查询从新渲染
                    }
                )
            .catch()
          })
          .catch(() => {});

    },
    updateFlowNames(row){ // 修改
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.getFlowNode()
      this.$http.get( `flowlines/${row.id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
          // this.flowNameList = res.data.data
          this.flowNameList.fname = res.data.data[0].fname
          this.flowNameList.fid = res.data.data[0].fid
// console.log(this.flowNameList)
          this.conforderform.lastquestions = res.data.data.map((item) => {
            return item.lineCurrent
          })

          // this.conforderform.lastquestions = res.data.data
          this.updateDialog = true

      })
      .catch()



    },
    addok(){
      this.XiaoHiuZiZuJian = false // 对话框毁灭
      this.dialogVisible=false  //添加成功后关闭对话框
      this.flownameGet()  //从新查询
    },
    goBack(){this.$router.go(-1);}, //返回上一个页面

    handleSizeChange(val){
      this.flowNameFormData.pageSize=val
      this.flownameGet();
    },
    handleCurrentChange(val){
      this.flowNameFormData.pageCur=val
      this.flownameGet()

    },
    queryFlowName(row){// 查看流程线
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
     this.nodeNameDialog = true
      this.$http.get(`flowlines/${row.id}` )
      .then(res => {

        setTimeout(() => {
          loading.close();
        });
        this.nodeData = res.data.data
      })
      .catch()
    },
    // 添加审批节点
    addlastitems(index, type) {
      if (type === '1') {
        const lastitem = this.conforderform.lastquestions[this.conforderform.lastquestions.length - 1]
        if (lastitem === '' ) {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.conforderform.lastquestions.push('')
        }
      }
    },
    rmlastitems(index, type) {
      switch (type) {
        case '1':
          this.conforderform.lastquestions.splice(index, 1)
          break
        default:
          break
      }
      this.$message.success('移除成功')
    },
    getFlowNode(){//查询流程审批人
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("flownodes")
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.flowNodeData=res.data.data
          })
    },
    updateLineBtn(){ // 修改流程
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const flownameVo = {
        "fid": this.flowNameList.fid,
        "list":this.conforderform.lastquestions
      }

      this.$http.put("flowlines" , flownameVo)
          .then(() => {

            setTimeout(() => {
              loading.close();
            });
            this.$message({
              message: '修改成功!',
              type: 'success'
            });
            this.updateDialog=false
          })

    },

  }


}
</script>

<style scoped>

</style>